<template>
  <div class="loginBox">
    <div class="loginBoxTop">
      <div class="loginBoxTopTitle">2014电商后台管理系统</div>
    </div>
    <div class="loginBoxBody">
      <div class="logFrom">
        <el-form
          :model="userinfo"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
        >
          <el-form-item label="用户名" prop="username">
            <el-input v-model="userinfo.username"></el-input>
          </el-form-item>
					<el-form-item label="密码" prop="password" >
            <el-input v-model="passwordNomd5" show-password></el-input>
          </el-form-item>
          <el-form-item class="loginBtn">
            <el-button type="primary" @click="submitForm('ruleForm')"
              >登录</el-button
            >
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { userlogin } from "@/api/login"
import md5 from 'js-md5';

export default {
	name:"login",
	data () {
		return {
			passwordNomd5:"",
			userinfo:{
				username:"",
				password:""
			},
			rules:{
				password:[{required: true, message: '请输入密码名称', trigger: 'blur'}]
			}
		}
	},
	methods: {
		submitForm(fromname){
			// console.log(this.userinfo);
			let passwordMd5 = md5(this.passwordNomd5 + md5(this.passwordNomd5).substr(10, 10) + 2014);
			// console.log(passwordMd5);
			this.userinfo.password = passwordMd5
			this.$refs[fromname].validate((valid)=>{
				if(valid){
					userlogin(this.userinfo).then(res=>{
						console.log(res);
						if(res.status === 200){
							this.$cookie.set("userid",res.userid,"1d")
							this.$cookie.set("token",res.token,"1d")
							this.$cookie.set("name",res.name,"1d")
							this.$cookie.set("username",res.username,"1d")
							this.$message("登录成功");
							this.$router.push("/")
						}
					}).catch(err=>{
						console.log(err);
						this.$message("登录失败 请检查用户名密码");
					})
				}else{
					this.$message("登录失败 请检查用户名密码");
				}
			})
		},
	}
};
</script>

<style>
.loginBox{
	margin: 200px auto;
	width: 500px;
	border: 1px solid #ebeef5;
	box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}

.loginBoxTop{
	padding: 18px 20px;
	border-bottom:1px solid #ebeef5;
}

.loginBoxTopTitle{
	line-height: 100px;
	text-align: center;
	vertical-align: middle;
	font-size: 20px;
	color: #fff;
	font-weight: bold;
	background: #409eff;
	width: 460px;
	height: 100px;
}

.loginBoxBody{
	padding: 18px 20px;
	margin-bottom: 20px;
}

.loginBtn{
	display: flex;
}
</style>